<template>
    <div class="inputInfo">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane :label="eleInfo.componentName" name="first">
                <el-form
                        label-position="top"
                        label-width="100px"
                        style="max-width: 460px"
                >
                    <el-form-item label="组件名称：">
                        <el-input v-model="eleInfo.label"></el-input>
                    </el-form-item>
                    <el-form-item label="字段：">
                        <el-input v-model="eleInfo.key"></el-input>
                    </el-form-item>
                    <el-form-item label="选项：">
                        <Draggable
                                :list="eleInfo.option"
                                :animation="100"
                                item-key="id"
                                class="list-group"
                                :forceFallback="false"
                                ghost-class="ghost"
                                :group="{ name: 'option'}"
                                :sort="true"
                        >
                            <template #item="{ element,index }">
                                <div class="optionbox">
                                    label: <el-input v-model="eleInfo.option[index].label"></el-input>
                                    value: <el-input v-model="eleInfo.option[index].value"></el-input>

                                    <el-icon style="color: red;cursor: pointer" @click="delOption(eleInfo.option,index)" ><delete /></el-icon>
                                </div>
                            </template>
                        </Draggable>
                        <a href="javascript:void (0);" @click="pushOption(eleInfo.option)">新增选项</a>
                    </el-form-item>
                    <el-form-item label="是否必填：">
                        <el-radio-group v-model="eleInfo.rules.required">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="提示消息：">
                        <el-input v-model="eleInfo.rules.message"></el-input>
                    </el-form-item>
                    <el-form-item label="验证方式：">
                        <el-select v-model="eleInfo.rules.trigger" placeholder="请选择验证方式">
                            <el-option
                                    label="失焦"
                                    value="blur"
                            >
                            </el-option>
                            <el-option
                                    label="变化"
                                    value="change"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref} from 'vue';
    import Draggable from 'vuedraggable'
    export default defineComponent({
        name: 'radioInfo',
        components:{Draggable},
        props:{
           eleInfo:{
               type:Object
           }
        },
        setup() {
            const activeName = ref('first')
            const name = ref('')

            const pushOption = (item:any)=>{
                item.push({
                    label:'新选项',
                    value:'键值'
                })
            }

            const delOption = (item:any,index:number)=>{
                item.splice(index, 1)
            }
            return {name,activeName,pushOption,delOption};
        },
    });
</script>
<style scoped>
    .optionbox{
        display: flex;
        align-items: center;
        margin: 5px 0;
    }
</style>
